<template>
  <div>
    <t-card
      class="list-card-container"
      style="width: 100vw;height: 88vh;"
    >
      <!-- 操作按钮 -->
      <t-row justify="space-between">
        <div class="left-operation-container">
          示例下载按钮：
          <t-button
            variant="base"
            theme="default"
            @click="handleDownload"
          >
            下载
          </t-button>
        </div>
      </t-row>
      <!-- 列表 -->
      <div style="width: 100%;height: 80vh;overflow: auto;background-color: #fff;">
        <!-- <div>
          <div style="width: 1000px;">
            <span ref="typed"></span>
          </div>
        </div> -->
        <vue-markdown
          :source="mdContent"
          class="newConcentLeft my-markdown"
        ></vue-markdown>
      </div>
    </t-card>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import VueMarkdown from 'vue-markdown';
import { MarkdownPro, MarkdownPreview } from 'vue-meditor'
import downloadMD from '../../../../../public/markdown/downloadfunction.md?raw';//使用?raw将引入文件变成字符串
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-clike.min.js';
import 'prismjs/components/prism-javascript.min.js';
// import Typed from 'typed.js';

// 引入public中的静态文件 
export default Vue.extend({
  name: "ListBase",
  components: {
    VueMarkdown,
    MarkdownPro,
    MarkdownPreview,
  },
  filters: {
  },
  data() {
    return {
      formJson: { "widgetList": [], "formConfig": { "labelWidth": 80, "labelPosition": "left", "size": "", "labelAlign": "label-left-align", "cssCode": "", "customClass": "", "functions": "", "layoutType": "PC", "onFormCreated": "", "onFormMounted": "", "onFormDataChange": "" } },
      formData: {},
      optionData: {},
      text: "在遥远的东方，有一个古老而神秘的国度——云梦国。这个国家被连绵不绝的山脉环绕，山间云雾缭绕，仿佛与世隔绝。云梦国的人民世代相传着一种独特的技艺——云梦编织术。这种技艺能够将天空中的云彩捕捉下来，编织成各种美丽的图案，不仅美观而且还能带来好运。每年春天，当第一缕阳光照耀在云梦国的山顶上时，整个国家都会迎来一年一度的云梦节。这一天，所有的居民都会穿着节日盛装，手持用云梦编织术制作的各种装饰品，欢聚一堂庆祝新一年的到来。孩子们则会追逐着那些被释放到空中的云梦气球，欢声笑语充满了整个山谷。云梦国虽然地处偏远，但它那独特的文化和美丽的风景吸引着世界各地的人们前来探访。在这里，每个人都能找到属于自己的那份宁静与美好。",
      mdContent: downloadMD,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        beginTime: undefined,
        endTime: undefined
      },// 导出参数
    };
  },
  computed: {
  },
  created() {
  },
  mounted() {
    Prism.highlightAll();
    // new Typed(this.$refs.typed, {
    //   strings: [this.text],
    //   typeSpeed: 50, // 输出速度
    //   contentType: 'text', // 可选 'html' 或 'text'
    // });
  },
  methods: {
    submitForm() {
      this.$refs.vFormRef.getFormData().then(formData => {
        // Form Validation OK
        alert(JSON.stringify(formData))
      }).catch(error => {
        // Form Validation failed
        this.$message.error(error)
      })
    },
    // 文件下载
    handleDownload() {
      this.download(
        "system/dict/type/export",
        {
          ...this.queryParams
        },
        `type_${new Date().getTime()}.xlsx`
      );
    },
  }
});
</script>
<style>
.t-table--column-fixed .t-table__cell--fixed-right {
  z-index: 999;
  background-color: #fff;
}
</style>

<style lang="less" scoped>
@import "@/style/variables";

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 0 0 6px;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}

.t-button + .t-button {
  margin-left: @spacer;
}

.newConcentLeft {
  margin: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #19181a;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  white-space: pre-wrap;
  word-wrap: break-word;

  img {
    width: 100%;
  }

  > table {
    width: 100%;
  }

  > pre {
    white-space: normal;
  }
}

.vfDesignerClass /deep/.el-header.main-header[data-v-56b24ae4] {
  border-bottom: 2px dotted #ebeef5;
  height: 48px !important;
  line-height: 48px !important;
  min-width: 800px;
  display: none !important;
}
</style>
